<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue2.6.12.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<ul>
					<li v-for="(item,index) in lists">
						<div>{{item.name}}</div>
						<div>{{item.price}}</div>
						<div v-if="item.state===0">未支付</div>
						<div v-else-if="item.state===1">待发货</div>
						<div v-else-if="item.state===2">已发货</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				lists:[
					{
						id:1,
						name:'手机1',
						price:100,
						state:0
					},
					{
						id:2,
						name:'手机2',
						price:200,
						state:0
					},
					{
						id:3,
						name:'手机3',
						price:300,
						state:1
					},
					{
						id:4,
						name:'手机4',
						price:400,
						state:2
					},
					{
						id:5,
						name:'手机5',
						price:500,
						state:3
					}
				],
			},
			methods:{}
		});
	</script>
</html>
